
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import React, { Fragment, useState } from 'react'
import { Input, QRCode, Space, message } from 'antd';

import { login } from "@/apis/user.js"

const Invite = (props) => {
	const navigate = useNavigate()
	const [active,serActive]=useState(1);
	const [name,serName]=useState(null);
	const [zhuan,serZhuan]=useState(null);
	const [trc20,serTrc20]=useState(null);
	const [erc20,serErc20]=useState(null);
	
	const changeTab=(current)=>{
		console.log('current:', current);
		serActive(current) //更新 active 状态
	}
	const { t } = useTranslation();
	
	return (
		<React.Fragment>
			<HeaderTitle title={t('card.title1')} right_title={t('agent.title1')}/>
			<div className={style['main']}>
				<div className={style['withdraw_group']}>
					<div className={style['withdrawBox']}>
						<div className={`${style['wbli']} ${active === 1 ? style['active'] : ''}`} onClick={()=>{changeTab(1)}}>
							<div className={style['btn']}>{t('card.title2')}</div>
						</div>
						<div className={`${style['wbli']} ${active === 2 ? style['active'] : ''}`} onClick={()=>{changeTab(2)}}>
							<div className={style['btn']}>{t('card.title3')}</div>
						</div>
						<div className={`${style['wbli']} ${active === 3 ? style['active'] : ''}`} onClick={()=>{changeTab(3)}}>
							<div className={style['btn']}>{t('card.title4')}</div>
						</div>
						<div className={`${style['wbli']} ${active === 4 ? style['active'] : ''}`} onClick={()=>{changeTab(4)}}>
							<div className={style['btn']}>{t('card.title5')}</div>
						</div>
					</div>
				</div>
				<div className={style['forms']}>
					{
						active == 1 ? (<div className={style['form-ul']}>
							<div className={style['fli']}>
								<label>{t('card.title6')}</label>
								<Input defaultValue={name} placeholder={t('card.title7')} />
							</div>
							<div className={style['fli']}>
								<label>{t('card.title8')}</label>
								<Input defaultValue={zhuan} placeholder={t('card.title9')} />
							</div>
						</div>) : ''
					}
					{
						active == 3 ? (<div className={style['form-ul']}>
							<div className={style['fli']}>
								<label>{t('card.title10')}</label>
								<span>1 USDT : 7.87</span>
							</div>
							<div className={style['fli']}>
								<label>{t('card.title11')}</label>
								<span style={{color: '#333'}}>GUTIANLE</span>
							</div>
							<div className={style['fli']}>
								<label>{t('card.title12')}</label>
								<Input defaultValue={trc20} placeholder={t('card.title13')} />
							</div>
						</div>) : ''
					}
					{
						active == 4 ? (<div className={style['form-ul']}>
							<div className={style['fli']}>
								<label>{t('card.title14')}</label>
								<span>1 USDT : 7.87</span>
							</div>
							<div className={style['fli']}>
								<label>{t('card.title15')}</label>
								<span style={{color: '#333'}}>GUTIANLE</span>
							</div>
							<div className={style['fli']}>
								<label>{t('card.title16')}</label>
								<Input defaultValue={erc20} placeholder={t('card.title17')} />
							</div>
						</div>) : ''
					}
					<div className={style['operate']}>
						<div className={style['submitBtn']}>{t('card.title18')}</div>
					</div>
				</div>
			</div>
		</React.Fragment>
	)
}


export default Invite
